import Taro, { Config, Current } from '@tarojs/taro'
import { getCurrentInstance } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Video, Image, SwiperItem, RichText } from '@tarojs/components'
import { AtSearchBar, AtTabs, AtTabsPane, AtIcon } from 'taro-ui'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import CTopbar from '@/components/CTopBar/index'
import CImage from '@/components/CImage/index'
import { course_detail_api } from './service'
import './index.scss'
import Playing from '@/assets/Playing.gif'
import play from '@/assets/play.png'
import prefixZero from '@/utils/PrefixZero.ts'
// import formatSeconds from '@/utils/formatSeconds'
import { course_lower_api, playCourseApi } from '../../College/CourseDetails/service'
import './index.config'
/**
 * 课程详情
 */
class HomeWeek extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      video_url: '', //播放地址
      current: 0,
      id: '',
      lower_data: [], //tags 信息
      videoData: {},
      pageSize: 10,
      pageNum: 1,
    }
  }
  componentWillMount() {
    const { id, courseId } = Current.router?.params
    this.setState(
      {
        id: Number(id), //视频id
        courseId: Number(courseId), //单独课程的id
      },
      () => {
        this.get_course_lower()
        this.playCourse()
      },
    )
  }
  // 获取栏目列表
  get_course_lower() {
    const { id, current, pageSize, pageNum } = this.state
    course_lower_api(id, current + 1, pageSize, pageNum).then(({ result, data }) => {
      this.setState({
        lower_data: data,
      })
    })
  }

  onActionClick() {
    console.log('开始搜索')
  }
  handleClick(value) {
    this.setState(
      {
        current: value,
      },
      () => this.get_course_lower(),
    )
  }

  // 目录点击
  ClickAuditionChange(isFree, courseId) {
    const { id } = this.state
    if (isFree !== 0) {
      // 更换播放地址
      Taro.redirectTo({
        url: '/pages/College/VideoPlay/index?id=' + id + '&courseId=' + courseId,
      })
    } else {
      Taro.showToast({
        title: '请先购买',
        icon: 'none',
        duration: 2000,
      })
    }
  }

  // 获取视频连接
  playCourse() {
    const { courseId } = this.state
    playCourseApi(courseId).then(({ result, data }) => {
      if (result === 1999) {
        this.setState({
          videoData: data,
        })
      }
    })
  }

  onReachBottom() {
    const { current } = this.state
    if (current === 2) {
      this.setState(
        {
          pageNum: pageNum + 1,
        },
        () => {
          this.get_course_lower()
        },
      )
    }
  }

  render() {
    const {
      current,
      lower_data: { courses = [], comment = [], remarks },
      videoData,
    } = this.state
    console.log(videoData)

    const tabList = [{ title: '目录' }, { title: '课程简介' }, { title: '精彩评论' }]
    return (
      <View className='pagewrap' style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='视频播放' showBack></CTopbar>
        </View>
        <View className='colleg'>
          {/* 课程图片||视频插件 */}
          <View className='imageContainer'>
            <txv-video vid={videoData.courseLink} playerid='txv1'></txv-video>
          </View>
          {/* 课程介绍 */}

          {/* tag切换栏 */}

          <View className='tabsWsrap'>
            <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
              <AtTabsPane current={current} index={0}>
                <View className='catalog'>
                  <Text className='catalogTitle'>目录</Text>
                </View>
                {courses.map((i, index) => {
                  return (
                    <View className='catalogItem' key={index} onClick={this.ClickAuditionChange.bind(this, i.is_free, i.id)}>
                      <View>{prefixZero(index, 2)}</View>
                      <View className='ItemMiddle'>
                        <Text className='ItemTime'>{i.classTitle}</Text>
                        {/* <Text className='ItemTime'>时长：{formatSeconds(i.classTime)}</Text> */}
                      </View>
                      <View className='rightslot'>
                        {/* 播放||播放中 */}
                        {i.id === videoData.id ? <Image className='Playing' src={Playing} /> : <Image className='play' src={play} />}
                      </View>
                    </View>
                  )
                })}
                {/* 占位 */}
                <View className='margintop80'></View>
              </AtTabsPane>
              <AtTabsPane current={current} index={1}>
                <View className='introduction'>
                  <Text className='introductionTitle'>课程简介</Text>
                </View>
                {remarks ? <View className='richtext' dangerouslySetInnerHTML={{ __html: remarks }}></View> : ''}
                {/* <View className='richtext'>
                  <RichText nodes={remarks}></RichText>
                </View> */}
              </AtTabsPane>
              <AtTabsPane current={current} index={2}>
                <View className='GreatComments'>
                  <Text className='GreatCommentsTitle'>精彩评论</Text>
                </View>
                {comment.map((c, i) => {
                  return (
                    <View className='commentItem' key={i}>
                      <View className='authorImg'>
                        <CImage src={c.avatarUrl} circle></CImage>
                      </View>
                      <View className='commentRight'>
                        <View className='commentTop'>
                          <Text className='nickName'>{c.nickName}</Text>
                          <Text className='commentDate'>{c.gmtCreate}</Text>
                        </View>
                        <View className='commentContent'>{c.comment}</View>
                      </View>
                    </View>
                  )
                })}

                {/* 站位 */}
                <View className='margintop80'></View>
              </AtTabsPane>
            </AtTabs>
          </View>
        </View>
      </View>
    )
  }
}

export default HomeWeek
